<template>
  <el-form :rules="rules" :model="form" ref="form" label-width="80px">
    <!-- 手机 -->
    <el-form-item label="手机" prop="phone" v-if="chekif('phone')">
        <el-input
          v-model="form.phone"
          placeholder="请输入手机号码"
          prefix-icon="el-icon-mobile-phone"
          style="font-size:14px;"
          :disabled="this.button=='修改信息'"
        ></el-input>
      </el-form-item>
     <!-- 密码 -->
      <el-form-item label="密码" prop="password" v-if="chekif('password')">
        <el-input
          v-model="form.password"
          placeholder="填写密码"
          prefix-icon="el-icon-lock"
          show-password
        ></el-input>
      </el-form-item>
    <!-- 确认密码 -->
    <el-form-item
      label="确认密码"
      prop="confirmPassword"
      v-if="chekif('confirmPassword')"
    >
      <el-input
        placeholder="确认密码"
        type="confirmPassword"
        v-model="form.confirmPassword"
        prefix-icon="el-icon-unlock"
        show-password
      ></el-input>
    </el-form-item>
    <!-- 短信验证码 -->
    <el-form-item
      label="验证码"
      prop="code"
      inline="{true}"
      v-if="chekif('code')"
    >
      <el-input
        :style="
          this.button == '修改密码'
            ? 'width: 150px;'
            : 'width: 40%; padding: 0px  10px 0px 0px;'
        "
        v-model="form.code"
        @keyup.enter.native="cb"
      ></el-input>
      <el-button :disabled="isSended" type="success" @click="sendCode" style="width = 100px">
        <span v-show="count<60">{{ this.count }}s</span> <span v-show="count>=60">发送验证码</span> 
      </el-button>
    </el-form-item>
    <!-- 图片验证码 -->
    <el-form-item prop="captcha" label="验证码" v-if="chekif('captcha')">
      <el-input
        type="text"
        placeholder="请输入验证码"
        v-model="form.captcha"
        class="captcha"
        @keyup.enter.native="cb"
      ></el-input>
      <img :src="'data:image/png;base64,' + this.url" @click="getCaptcha" />
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item>
      <el-button
        type="primary"
        size="medium"
        class="handleBtn login"
        @click="cb"
      >
        {{ this.btnText }}
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { getCaptcha2 } from "../../Api/login/index";
export default {
  props: {
    callback: {
      type: Function,
      required: true,
    },
    options: {
      type: Array,
      default() {
        return ["phone", "code"];
      },
      validator(arr) {
        const options = [
          "phone",
          "password",
          "confirmPassword",
          "code",
          "loginId",
          "captcha",
          "userName",
          "email",
          "avatar",
          "roleName",
          "roleRemark",
        ];
        let valid = true;
        arr.some((option) => {
          if (!options.includes(option)) {
            valid = false;
            return true;
          }
          return false;
        });
        return valid;
      },
    },
    button: {
      type: String,
      default: "登 录",
      validator(val) {
        return [
          "登 录",
          "注 册",
          "重 设 密 码",
          "修改信息",
          "修改密码",
          "添加角色",
          "修改角色",
        ].includes(val);
      },
    },
    defaultForm: {
      type: Object,
      default() {
        return {phone:"13246904629"};
      },
    },
  },
  watch: {
    defaultForm: {
      deep: true,
      handler(newForm) {
        this.form.roleName = newForm.name;
        this.form.roleRemark = newForm.remarks;
      },
    },
    options: function () {
      console.log("aaa", this.options);
    },
  },
  data() {
    // 自定义表单校验设置密码和确认密码
    var validatePassword = (rule, value, callback) => {
      if (this.form.password === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.confirmPassword !== "") {
          this.$refs.form.validateField("confirmPassword");
        }
        callback();
      }
    };

    var validateConfirmPassword = (rule, value, callback) => {
      if (this.form.confirmPassword === "") {
        callback(new Error("请再次输入密码"));
      } else if (this.form.confirmPassword !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 发送验证码标志
      isSended: false,

      // 发送验证码倒计时
      count: 60,

      // 图形验证码图片
      url: "",

      //   按钮文本内容
      btnText: this.button,

      // 打开上传文件弹窗标志
      isOpen: false,

      // 表单
      form: {
        phone: this.defaultForm.phone,
        password: "",
        confirmPassword: "",
        code: "",
        loginId: this.defaultForm.id,
        captcha: "",
        userName: this.defaultForm.username || this.defaultForm.userName,
        email: this.defaultForm.email,
        avatar:
          this.defaultForm.avatar ||
          "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        roleName: this.defaultForm.name,
        roleRemark: this.defaultForm.remarks,
      },

      //表单验证规则
      rules: {
        // 验证用户ID是否合法
        loginId: [
          { required: true, message: "请输入用户ID", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],

        // 验证密码
        password: [
          {
            validator: validatePassword,
            trigger: "blur",
            required: true,
          },
          // {
          //   pattern: /^[a-zA-Z]\w{5,17}$/,
          //   message: "以字母开头，长度在6~18之间，只能包含字母、数字和下划线",
          // },
        ],

        // 确认密码
        confirmPassword: [
          {
            validator: validateConfirmPassword,
            required: true,
            trigger: "blur",
          },
        ],

        // 用户名
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],

        // 手机
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            len: 11,
            pattern: /1\d{10}/,
            message: "号码必须以1开头且长度是11位",
          },
        ],

        // 图形验证码
        captcha: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            len: 4,
            message: "长度为4个字符",
            trigger: "blur",
          },
        ],

        // 短信验证码
        code: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
          {
            len: 6,
            message: "长度为6个数字",
            trigger: "blur",
          },
        ],

        // 邮箱
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: "邮箱格式不正确",
          },
        ],

        // 头像
        avatar: [{ required: true, message: "请上传图片", trigger: "blur" }],

        // 角色名称
        roleName: [
          { required: true, message: "请填写角色名", trigger: "blur" },
        ],

        // 角色标签
        roleRemark: [
          { required: true, message: "请填写角色标签", trigger: "blur" },
        ],
      },
    };
  },
  // render(h) {
  //   // 输入手机号
  //   let phone = (
  //     <el-form-item label="手机" prop="phone">
  //       <el-input
  //         // vModel={this.form.phone}
  //         value={this.form.phone}
  //         onInput={(val)=>{
  //           this.form.phone = val;
  //         }}
  //         placeholder="请输入手机号码"
  //         prefix-icon="el-icon-mobile-phone"
  //         style="font-size:14px;"
  //         disabled={this.button=='修改信息'}
  //       ></el-input>
  //     </el-form-item>
  //   );

  //   // 短信验证码
  //   let phoneCode = (
  //     <el-form-item label="验证码" prop="phoneCode" inline={true}>
  //       <el-input
  //         placeholder="短信验证码"
  //         style={this.button=='修改密码'?"width: 150px;":"width: 40%; padding: 0px  10px 0px 0px;"}
  //         vModel={this.form.phoneCode}
  //       ></el-input>
  //       <el-button
  //         disabled={this.isSended}
  //         type="success"

  //         onClick={() => this.sendCode()}
  //       >
  //         <span vShow={this.isSended}>{this.count}s</span> 发送验证码
  //       </el-button>
  //     </el-form-item>
  //   );

  //   // 图形验证码
  //   let captcha = (
  //     <el-form-item prop="captcha" label="验证码">
  //       <el-input
  //         type="text"
  //         placeholder="请输入验证码"
  //         vModel={this.form.captcha}
  //         class="captcha"
  //       ></el-input>
  //       <img
  //         src={"data:image/png;base64," + this.url}
  //         onClick={() => {
  //           this.getCaptcha();
  //         }}
  //       />
  //     </el-form-item>
  //   );

  //   // 密码
  //   let password = (
  //     <el-form-item label="密码" prop="password">
  //       <el-input
  //         vModel={this.form.password}
  //         placeholder="设置密码"
  //         prefix-icon="el-icon-lock"
  //         show-password
  //       ></el-input>
  //     </el-form-item>
  //   );

  //   // 确认密码
  //   let confirmPassword = (
  //     <el-form-item label="确认密码" prop="confirmPassword">
  //       <el-input
  //         placeholder="确认密码"
  //         type="confirmPassword"
  //         vModel={this.form.confirmPassword}
  //         prefix-icon="el-icon-unlock"
  //         show-password
  //       ></el-input>
  //     </el-form-item>
  //   );

  //   // 用户ID
  //   let loginId = (
  //     <el-form-item prop="loginId" label="用户id">
  //       <el-input
  //         autofocus
  //         type="text"
  //         required=""
  //         placeholder=" 账号"
  //         vModel={this.form.loginId}
  //         prefix-icon="iconfont icon-xia"
  //         disabled
  //       ></el-input>
  //     </el-form-item>
  //   );

  //   // 用户名
  //   let userName = (
  //     <el-form-item label="用户名" prop="userName">
  //       <el-input
  //         vModel={this.form.userName}
  //         placeholder="请输入用户名"
  //         prefix-icon="el-icon-user"
  //       ></el-input>
  //     </el-form-item>
  //   );

  //   // 邮箱
  //   let email = (
  //     <el-form-item label="邮箱" prop="email">
  //       <el-input
  //         vModel={this.form.email}
  //         placeholder="请输入邮箱"
  //         prefix-icon="el-icon-message"
  //       ></el-input>
  //     </el-form-item>
  //   );
  //   // 这尼玛就离谱，src也变了，就是加载不出来。直接放字符串就行
  //   // <el-avatar size={50} src={this.form.avatar} ref="avatar"></el-avatar>（313行）
  //   // 头像
  //   // let avatar = (
  //   //   <el-form-item label="头像" inline={true}>
  //   //     <img class="avatar" src={this.form.avatar}>
  //   //       无
  //   //     </img>
  //   //     <el-button onClick={() => (this.isOpen = true)} class="uploadAvatar">
  //   //       上传头像
  //   //     </el-button>
  //   //     <UploadFile
  //   //       type="image"
  //   //       upload-success={(file) => this.uploadAvatar(file)}
  //   //       close-modal={() => (this.isOpen = false)}
  //   //       is-open={this.isOpen}
  //   //       init-files={this.avatar}
  //   //     ></UploadFile>
  //   //   </el-form-item>
  //   // );

  //   // 角色名
  //   let roleName = (
  //     <el-form-item label="角色名" prop="roleName">
  //       <el-input
  //         vModel={this.form.roleName}
  //         placeholder="请输入角色名"
  //       ></el-input>
  //     </el-form-item>
  //   );
  //   // 角色标签
  //   let roleRemark = (
  //     <el-form-item label="角色标签" prop="roleRemark">
  //       <el-input
  //         vModel={this.form.roleRemark}
  //         placeholder="请输入角色标签"
  //       ></el-input>
  //     </el-form-item>
  //   );
  //   // 所有的表单选项
  //   let allOptions = {
  //     phone,
  //     phoneCode,
  //     captcha,
  //     password,
  //     confirmPassword,
  //     loginId,
  //     userName,
  //     email,
  //     // avatar,
  //     roleName,
  //     roleRemark,
  //   };

  //   // 按钮
  //   let btn = (
  //     <el-form-item>
  //       <el-button
  //         id="login"
  //         type="primary"
  //         size="medium"
  //         class="handleBtn"
  //         onClick={() => this.cb()}
  //       >
  //         {this.btnText}
  //       </el-button>
  //     </el-form-item>
  //   );

  //   return (
  //     <el-form
  //       {...{
  //         props: {
  //           model: this.form,
  //           // rules: this.rules,
  //         },
  //       }}
  //       ref="form"
  //       label-width="80px"
  //     >
  //       {
  //         // 渲染表单选项
  //         this.options.map((component) => allOptions[component])
  //       }
  //       {
  //         // 插槽
  //         this.$slots.showInfo
  //       }
  //       {
  //         // 渲染按钮
  //         btn
  //       }
  //     </el-form>
  //   );
  // },

  methods: {
    //检验是否显示
    chekif(val) {
      for (let value of this.options) {
        if (value == val) {
          return true;
        }
      }
    },
    // 点击登录、注册、找回密码按钮时触发的回调函数
    cb() {
      // 校验函数
      this.$refs["form"].validate((valid, obj) => {
        // console.log("valid: ", valid);
        if (valid) {
          // 处理应该传出去的retForm
          let retForm = {};
          this.options.forEach((key) => {
            retForm[key] = this.form[key];
          });
          this.callback(retForm);
        }
      });
    },

    // 验证码发送倒计时
    startCountDown() {
      let timer = setInterval(() => {
        if (this.count > 1) {
          this.count--;
          console.log("111")
        } else {
          clearInterval(timer);
          this.isSended = false;
          this.count = 60;
          console.log("222")
        }
        console.log(this.count)
      }, 1000);
    },

    // 根据手机号发送验证码
    sendCode() {
      this.$refs.form.validateField("phone", async (err) => {
        // console.log(err);
        if (!err) {
          // console.log("发送验证码");
          // 类型：1是修改资料，2是登录，3是注册
          let type;
          if (this.button === "登 录") {
            type = 2;
          } else if (this.button === "注 册") {
            type = 3;
          } else if (this.button === "重 设 密 码" || this.button === "修改密码") {
            type = 1;
          }
          // let url = `/sendVerify/${type}/${this.form.phone}`;
          // const { data: res } = await this.$message.get(url);
          // console.log('res: ', res);
          // 已成功发送信息，开始倒计时
          this.isSended = true;
          // this.elMessage.success(res.message);
          this.startCountDown();
        } else {
          this.elMessage.error(res.message);
        }
      });
    },

    // 点击图片获取验证码
    async getCaptcha() {
      const { data: res } = await getCaptcha2();
      if (res.statusCode === 20000) {
        this.$message.success("验证码获取成功");
      } else {
        this.$message.error(res.message);
      }
      this.url = res.data;
    },

    // 点击上传图片
    // async uploadAvatar(fileStr) {
    //   console.log("fileStr: ", fileStr);
    //   this.form.avatar = fileStr;
    // },
  },
};
</script>
<style lang="scss" scoped>
.uploadAvatar {
  display: inline-block;
  vertical-align: 20px;
  margin-left: 20px !important;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>